<template>
	<view class="statuts-bar-box" @click="active(action.editActiveSetBg)">
		<view class="s-b-b">
			<view class="time-txt">{{barTimeTxt}}</view>
			<view class="pw-per-box">
				<view>100%</view>
				<image src="../../../static/images/power-icon.png"></image>
			</view>
		</view>
		<view class="tit-txt" :id="action.editActiveTitle" @click.stop="active(action.editActiveTitle)"   
				@mouseenter.stop="onMouseEnter($event)"
				@mouseleave.stop="onMouseLeave($event)">{{titleTxt}}</view>
		<view class="tit-txt-line" v-if="curEditId == action.editActiveTitle"></view>
		<view class="tit-txt-edit" v-if="curEditId == action.editActiveTitle && isEdit" @click.stop="edit({act:action.editActiveTitle,data:{}})">编辑内容</view>
	</view>
</template>
<script>
	import editInterActive from "@/js/inieractive/EditInteractive.js";
	let timeout = null;
	export default
	{
		props:['titleTxt','curId','isShow'],
		data()
		{
			return{
				action:editInterActive.action,
				barTimeTxt:"",
				curEditId:"",
				isEdit : false,
			}
		},
		watch:
		{
			curId:
			{
				handler(value)
				{
					this.curEditId = value;
				}
			}
		},
		mounted() {
			let now = new Date();
			this.barTimeTxt = String(now.getHours()) + ":" + String(now.getMinutes());
		},
		methods: {
			active(act,type=0)
			{
				if(this.isShow)return;
				this.isEdit = true;
				this.curEditId = act;
				console.log("act===1==:",act);
				if(type == 0)
					this.$emit('active',act);
			},
			
			edit(data)
			{
				this.isEdit = true;
				editInterActive.eidt(data);
			},
			
			onMouseEnter(event) 
			{
				if(this.isShow)return;
				if(this.isEdit)return;
				this.curEditId = event.currentTarget.id;
				// this.testFun(event.currentTarget.id);
			},
			
			// 防抖
			testFun(value,time = 500) {
			    if (timeout) {
			        clearTimeout(timeout); // 规定时间内若定时器存在则清除
			    }
			    timeout = setTimeout(() => {
					this.curEditId = value;
			    }, time);
			},
			
			onMouseLeave(event)
			{
				if(this.isShow)return;
				if(this.isEdit)return;
				this.curEditId = "";
				// this.testFun("");
			},
		}
	}
</script>

<style lang="scss">
	.statuts-bar-box
	{
		height: 176upx;
		width: 100%;
		background-color: #FFF;
		position: relative;
		cursor: pointer;
		.s-b-b
		{
			display: flex;
			justify-content: space-between;
			padding: 38upx 20upx;
			.time-txt
			{
				
			}
			.pw-per-box
			{
				color: #AAA;
				display: flex;
				align-items: center;
				view
				{
					padding-right: 10upx;
				}
				image
				{
					width: 52upx;
					height: 20upx;
				}
			}
		}
		.tit-txt
		{
			text-align: center;
			cursor: pointer;
			font-size: 28upx;
			background-color: #FFF;
		}
		.tit-txt-line
		{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			height: 60upx;
			width:calc(100% - 30upx);
			border: 1upx dashed #000;
			pointer-events: none;
		}
		.tit-txt-edit
		{
			padding: 2upx 30upx;
			cursor: pointer;
			position: absolute;
			bottom: 64upx;
			right: 20upx;
			background-color:#000;
			border-radius: 8upx;
			color: #FFF;
		}
	}
</style>